<template>
    <div class="search-bar">
        <el-form ref="queryFormRef" :inline="true">
            <el-form-item label="关键字" prop="keywords">
                <el-input
                    v-model="keywords"
                    placeholder="菜单名称/app名称"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">
                    <template #icon><Search /></template>
                    搜索
                </el-button>
                <el-button @click="handleResetQuery">
                    <template #icon><Refresh /></template>
                    重置
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
let keywords = ref("");

const queryFormRef = ref(ElForm);
const emit = defineEmits(["handleQuery"]);

const props = defineProps({
    type: {
        required: true,
        default: "" as String,
    },
});

function handleQuery() {
    emit("handleQuery", keywords);
}

// 重置查询
function handleResetQuery() {
    keywords.value = "";
    handleQuery();
}

watch(
    () => props.type,
    (newValue, oldValue) => {
        keywords.value = "";
    }
);
</script>
